$type0: #6796ec;
$type1: #57bda6;
$type2: #f6bd16;
$type3: #f99655;
$type4: #f35757;
.tag-info {
  position: relative;
  .el-select {
    width: 100%;
  }
  .el-card__body {
    height: 100%;
    padding: 0;
  }
  .el-input-group__append button.el-button {
    background-color: $theme-color;
    border-color: $theme-color;
    color: #fff;
  }
  .el-tabs {
    position: absolute;
    top: 75px;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .el-tabs__header {
    .el-tabs__nav {
      margin: 0 50px;
    }
    .el-tabs__item {
      height: 37px;
      line-height: 37px;
      font-size: 16px;
      font-weight: bold;
      padding: 0 20px !important;
      margin-right: 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      &.is-active {
        color: #fff;
        background-color: #606ac3;
      }
    }
    .el-tabs__active-bar {
      background-color: transparent;
    }
  }
  .el-tabs__content {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 0;
    .el-tab-pane {
      height: 100%;
    }
  }
  .info-header {
    padding: 10px;
    border-bottom: 1px solid $border-color;
    .search-header {
      padding: 5px 0;
      .el-button {
        background-color: #606ac3;
        border-color: #606ac3;
      }
      .el-input__inner {
        height: 35px;
        line-height: 35px;
      }
      .el-input-group__append .el-button {
        padding-top: 10px;
        padding-bottom: 10px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      .el-col-3 {
        font-size: 20px;
        color: $theme-color;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
      }
    }
  }
  .info-list {
    width: 300px;
    height: 100%;
    border-right: 1px solid $border-color;
    position: relative;
    .list-filter {
      text-align: center;
      .el-col {
        cursor: pointer;
        &.type0 {
          span {
            background-color: $type0;
          }
          &.active {
            font-weight: bold;
            color: $type0;
          }
        }
        &.type1 {
          span {
            background-color: $type1;
          }
          &.active {
            font-weight: bold;
            color: $type1;
          }
        }
        &.type2 {
          span {
            background-color: $type2;
          }
          &.active {
            font-weight: bold;
            color: $type2;
          }
        }
        &.type3 {
          span {
            background-color: $type3;
          }
          &.active {
            font-weight: bold;
            color: $type3;
          }
        }
        &.type4 {
          span {
            background-color: $type4;
          }
          &.active {
            font-weight: bold;
            color: $type4;
          }
        }
        &.type5 {
          line-height: 20px;
          span {
            margin: 0 0 15px 0;
          }
          i {
            font-size: 20px;
            color: $theme-color;
          }
        }
        &.active span {
          height: 20px;
          margin-top: 0;
        }
      }
      span {
        display: inline-block;
        width: 40px;
        height: 10px;
        margin: 10px 0 5px 0;
        border-radius: 3px;
      }
    }
    .info-selector {
      position: absolute;
      top: 115px;
      right: 0;
      bottom: 80px;
      left: 0;
      overflow-y: auto;
      li {
        padding: 0 50px 0 30px;
        line-height: 40px;
        position: relative;
        cursor: pointer;
        div {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          display: inline-block;
          width: 50px;
          height: 100%;
          text-align: center;
          position: absolute;
          top: 0;
          right: 0;
          svg {
            width: 20px;
            height: 20px;
            margin-top: 10px;
          }
          .check {
            color: #57bda6;
          }
          &.type1 {
            color: $type1;
            svg {
              color: $type1;
            }
          }
          &.type2 {
            color: $type2;
            svg {
              color: $type2;
            }
          }
          &.type3 {
            color: $type3;
            svg {
              color: $type3;
            }
          }
          &.type4 {
            color: $type4;
            svg {
              color: $type4;
            }
          }
        }
        &.active {
          color: #fff;
          background-color: #7883c1;
          span {
            color: #fff;
            svg {
              color: #fff;
            }
            &.type1 {
              background-color: $type1;
            }
            &.type2 {
              background-color: $type2;
            }
            &.type3 {
              background-color: $type3;
            }
            &.type4 {
              background-color: $type4;
            }
          }
          &:before {
            display: inline-block;
            width: 5px;
            height: 5px;
            content: '';
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -2.5px;
          }
        }
      }
    }
    .el-pagination.is-background.el-pagination--small {
      width: 100%;
      white-space: normal;
      text-align: center;
      position: absolute;
      bottom: 10px;
      .el-pagination__total,
      .el-pager li,
      .btn-prev,
      .btn-next {
        margin-top: 10px;
      }
    }
  }
  .info-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-left: 300px;
    .content-header {
      font-size: 20px;
      font-weight: bold;
      padding: 20px 0;
      text-align: center;
      position: relative;
      .name {
        display: inline-block;
        min-width: 250px;
        height: 40px;
        line-height: 40px;
        background-color: #fcf5e5;
        border-radius: 2px;
        .el-input {
          font-size: 20px;
          i {
            font-size: 16px;
            color: $theme-color;
          }
        }
        .el-input__inner {
          border: 0;
          background-color: inherit;
        }
      }
      .status {
        float: right;
        margin: 5px 20px 0 0;
        .el-button--mini {
          font-size: 14px;
        }
        .el-button--info {
          background-color: #f6705a;
          border-color: #f6705a;
        }
      }
      img {
        width: 100px;
        vertical-align: top;
        margin: -10px 20px 0 0;
      }
    }
    .content-wrap {
      width: 100%;
      height: 100%;
      padding-bottom: 50px;
      .content-form {
        font-size: 16px;
        width: 100%;
        height: 100%;
        padding: 10px 50px;
        border-bottom: 1px solid $border-color;
        overflow-y: auto;
        p {
          padding: 15px 0;
          margin-bottom: 10px;
        }
      }
    }
    .content-handler {
      width: 100%;
      padding: 0 20px;
      position: absolute;
      bottom: 5px;
      text-align: right;
    }
  }
}
.info-tips {
  li {
    position: relative;
    padding: 5px 10px 5px 20px;
    &::before {
      width: 6px;
      height: 6px;
      content: '';
      background-color: #f6bd16;
      border-radius: 50%;
      position: absolute;
      left: 5px;
      top: 10px;
    }
  }
}
